<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String path =request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-easyui-1.4.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-easyui-1.4.5/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/admin.css">
	<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>

<script>
	function addTab(title, url) {
		if ($("#tabs").tabs("exists", title)) { // "exists"表示去判断指定title的tab选项卡是否已经打开
			$("#tabs").tabs("select", title); // 如果tab选项卡已经被打开过，则直接显示出该选项卡
		} else {
			$("#tabs").tabs("add", {
				title: title, // 指定标题
				content: tabContent(url), // 指定选项卡里的内容，一个新的页面，用iframe来展示
				border:false, // 边框
				closable:true // 选项卡是否可关闭
			})
		}
	}
	
	function tabContent(url) {
		return '<iframe scrolling="true" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
	}
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'功能导航'" style="width:150px;">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="系统管理" style="padding:10px;">
					<nav>
						<ul>
							<li><a href="javascript:void();" onclick="addTab('管理员列表', '<%=path%>/admin/loadPage');">管理员列表</a></li>
							<li><a href="javascript:void();" onclick="addTab('员工列表', '<%=path%>/emp/loadPage');">员工管理</a></li>
							<li><a href="javascript:void();" onclick="addTab('办公用品列表', '<%=path%>/emp/loadPage');">办公用品管理</a></li>
							<li><a href="javascript:void();" onclick="addTab('巡查列表', '<%=path%>/emp/loadPage');">巡查管理</a></li>
						</ul>
					</nav>	
				</div>
				<div title="日常办公" data-options="selected:true" style="padding:10px;">
					<nav>
						<ul>
							<li><a href="javascript:void();" onclick="addTab('部门列表', '<%=path%>/dept/loadPage');">部门管理</a></li>
							<li><a href="javascript:void();" onclick="addTab('员工列表', '<%=path%>/emp/loadPage');">员工管理</a></li>
						</ul>
					</nav>	
				</div>
				<div title="Title3" style="padding:10px">
					content3
				</div>
			</div>

	</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;text-align: center">
		宏图15春班项目1组&copy;版权所有
	</div>
	<div data-options="region:'center',title:'欢迎使用宏图OA办公自动化系统'">
				<div id="tabs" class="easyui-tabs" style="height:100%;">
				<div title="主页" style="padding:10px;">
					显示一些系统消息
				</div>
			</div>
	</div>
</body>
</html>